<template>
  <div>
    <el-row>
      <el-col :span="24" class="addRole">
        <!-- 查询 -->
        <el-popover placement="right-start" width="1000" style="margin-right:10px;" trigger="click" >
          <el-form :inline="true" :model="search">
              <el-form-item label="图纸编号" >
                  <el-input v-model="search.drawCode" @keyup.enter.native="searchBtn"></el-input>
              </el-form-item>
              <el-form-item label="生产令号" >
                  <el-input v-model="search.makeNo" @keyup.enter.native="searchBtn"></el-input>
              </el-form-item>
              <el-form-item label="任务流水号" >
                  <el-input v-model="search.taskSerialNo" @keyup.enter.native="searchBtn"></el-input>
              </el-form-item>
              <!-- <el-form-item label="自定义编码" >
                  <el-input v-model="search.code"></el-input>
              </el-form-item> -->
              <el-form-item label="任务单号" >
                  <el-input v-model="search.taskNo" @keyup.enter.native="searchBtn"></el-input>
              </el-form-item>
              <el-form-item label="客户" >
                  <el-input v-model="search.customer" @keyup.enter.native="searchBtn"></el-input>
              </el-form-item>
              <el-form-item label="29所编码" >
                  <el-input v-model="search.code29" @keyup.enter.native="searchBtn"></el-input>
              </el-form-item>
              <el-button type="primary" @click="searchBtn">确认</el-button>
              <el-button type="primary" @click="resSearchBtn">重置</el-button>
          </el-form>
          <el-button slot="reference" type="primary" icon="el-icon-search">查询</el-button>
        </el-popover>
        <el-popover
                ref="createValue"
                width="900"
                trigger="click"
            >
                <h1 style="color: #FFFFFF;background-color: #3ac1c4;margin-bottom:15px;padding:5px 0px 5px 15px; border-radius:3px;">今日记录</h1>
                <!-- <h1 style="margin-bottom:15px;padding:5px 0px 5px 15px;">导入计划次数:<span style="color:red;"> {{inputCount}}</span> 次</h1> -->
                <div style="width:95%;border:1px solid gray; margin:0 auto; padding:5px 5px 5px 5px;">
                    <el-table  :data="detailTableList"  tooltip-effect  highlight-current-row border stripe>
                        <el-table-column type="index" :index="0" label="序号" min-width="120" align="center"></el-table-column>
                        <el-table-column property="drawCode" label="图纸编号" min-width="120" align="center" sortable></el-table-column>
                        <el-table-column property="startTime" label="处理开始时间" min-width="120" align="center" sortable>
                          <template v-slot:default="scope">
                              <div v-html="timestampToTime(scope.row.startTime,'mm-dd hh:mm')"></div>
                          </template>
                        </el-table-column>
                        <el-table-column property="endTime" label="处理结束时间" min-width="120" align="center" sortable>
                           <template v-slot:default="scope">
                              <div v-html="timestampToTime(scope.row.endTime,'mm-dd hh:mm')"></div>
                          </template> 
                        </el-table-column>
                        <el-table-column property="consumptionTime" label="耗时" min-width="120" align="center" sortable></el-table-column>
                        <el-table-column property="proportion" label="工作时间占比" min-width="120" align="center" sortable>
                          <template v-slot:default="scope">
                              {{scope.row.proportion+'%'}}
                          </template>
                        </el-table-column>
                    </el-table>
                </div>
        </el-popover>
        <el-popover
                ref="createValueList"
                :width="autoWidth"
                trigger="click"
            >
                <h1 style="color: #FFFFFF;background-color: #3ac1c4;margin-bottom:15px;padding:5px 0px 5px 15px; border-radius:3px;">工作统计</h1>
                <!-- <h1 style="margin-bottom:15px;padding:5px 0px 5px 15px;">导入计划次数:<span style="color:red;"> {{inputCount}}</span> 次</h1> -->
                <div style="width:95%;border:1px solid gray; margin:0 auto; padding:5px 5px 5px 15px;">
                  <div style="width:400px;border:0px solid red; z-index:9999;    position:absolute;right:60px;top:55px;">
                     <span class="demonstration">时间</span>
                     <el-date-picker
                          v-model="workTimeList"
                          type="daterange"
                          align="right"
                          unlink-panels
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          @change="searchGantt"
                          :picker-options="pickerOptions"
                          >
                     </el-date-picker>
                  </div>
                  <div id="gantt" :style="{width:'100%',height:autoHeight}">

                  </div>
                </div>
        </el-popover>
        <el-button type="primary" v-popover:createValue @click="queryDayVal">缔造价值</el-button>
        <el-button type="primary" v-popover:createValueList @click="queryDayValList">个人统计</el-button>
      </el-col>
    </el-row>
    <!-- 29所列表 -->
    <br><br>
    <tableList29 ref="tableList29" :postData="postData" @tellFatherName="getChildEventParam">
      <template v-slot:default="scope" >
        <el-button @click="showDialog('update',scope.row)" type="text" size="small">详情</el-button>
        <el-button @click="confirmHandle('finished',scope.row)" type="text" size="small" v-if="status==='0'||isDidThis=='1'"><el-link type="success">编制完成</el-link></el-button>
        <el-button @click="confirmHandle('return',scope.row)" type="text" size="small"  v-if="status==='1'"><el-link type="warning">重新编制</el-link></el-button>
        <el-button @click="printPdf('process',scope.row)" type="text" size="small" v-if="scope.row.isFinishProcess ===1"><el-link type="info">工艺流程卡</el-link></el-button>
        <el-button @click="printPdf('quality',scope.row)" type="text" size="small" v-if="scope.row.isFinishProcess ===1"><el-link type="info">质量跟踪卡</el-link></el-button>
        <el-button @click="printPdf('material',scope.row)" type="text" size="small" v-if="scope.row.isFinishProcess ===1"><el-link type="info">原材料备料单</el-link></el-button>
      </template>
    </tableList29>
    <!-- 计划任务详情 -->
    <el-dialog class="bodyNopaddingTop" :title="dialog.title" :visible.sync="dialog.isShow"  v-dialogDrag width="1100px" @opened="dialogOpened" :close-on-click-modal="false" >
      <el-tabs v-model="dialog.activeName" @tab-click="dialogHandleClick">
        <el-tab-pane label="详情" name="1">
            <taskDetail29 :detailObj="dialog.formData" :type="dialog.type" :editDisalbe="false"></taskDetail29>

        </el-tab-pane>
        <!-- 工艺编制列表 -->
        <el-tab-pane label="工艺编制" name="6" v-if="dialog.type==='update'">
          <div >
            <el-button type="primary" @click="showDialog2('insert')" v-if="status==='0'">新增</el-button>
            <el-button type="success" plain @click="confirmHandle('finished',dialog.formData)" v-if="status==='0'">编制完成</el-button>
            <el-button type="warning" plain @click="confirmHandle('return',dialog.formData)" v-if="status==='1'&&dialog.formData.isMaterialTailor!==1">重新编制</el-button>
          </div>
          <processPlanList ref="processPlanListRef" :drawCode="dialog.drawCode" :formData="dialog.formData" :isApiType="status==='1'?2:1">
            <template v-slot:default="scope" >
              <el-button @click="showDialog2('update',scope.row)" type="text" size="small">详情</el-button>
              <el-button @click="showDialog2('upload',scope.row)" type="text" size="small">工艺上传列表</el-button>
              <el-button @click="showDialog2('delete',scope.row)" type="text" size="small" v-if="status==='0'"><el-link type="danger">删除</el-link></el-button>
            </template>
          </processPlanList>
        </el-tab-pane>
        <!-- 29所工艺列表 -->
        <el-tab-pane label="29所工艺" name="2" v-if="dialog.type==='update'">
          <processPlanList29 :data="dialog.formData" ref="processPlanList29Ref">
              <template v-slot:default="scope">
                <el-button @click="showDialog1('update',scope.row)" type="text" size="small">详情</el-button>
              </template>
          </processPlanList29>
        </el-tab-pane>
        <el-tab-pane label="图纸上传" name="3" v-if="dialog.type==='update'">
          <uploadList :upLoadType="1" :drawNo="dialog.drawCode"  ref="drawing"></uploadList>
        </el-tab-pane>
        <el-tab-pane label="工艺上传" name="4" v-if="dialog.type==='update'">
           <uploadList :upLoadType="2" :drawNo="dialog.drawCode"  ref="technology"></uploadList>
        </el-tab-pane>
        <el-tab-pane label="图形文件上传" name="5" v-if="dialog.type==='update'">
           <uploadList :upLoadType="3" :drawNo="dialog.drawCode"  ref="graphicsFile"></uploadList>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
     <!-- 新增编辑29所计划任务详情 -->
    <el-dialog class="bodyNopaddingTop" :title="dialog1.title" :visible.sync="dialog1.isShow" v-dialogDrag :close-on-click-modal="false" >
       <processPlanDetail29 :formData="dialog1.formData" :type="dialog1.type" :tid="dialog.formData.tid" :disabled='true' ></processPlanDetail29>
    </el-dialog>
    <!-- 新增/编辑工艺编制 -->
    <el-dialog class="bodyNopaddingTop" :title="dialog2.title" :visible.sync="dialog2.isShow" v-dialogDrag @opened="dialog2Opened" :close-on-click-modal="false" >
      <div v-if="dialog2.type==='upload'">
        <uploadtemp :upLoadType="dialog2.formData.name" :drawNo="dialog2.formData.drawNo" :processId="dialog2.formData.id" @insert-success="handleAvatarSuccess" v-if="status==='0'"></uploadtemp>
        <uploadList :upLoadType="dialog2.formData.name" :drawNo="dialog2.formData.drawNo" :processId="dialog2.formData.id" ref="processUploadRef"></uploadList>
      </div>
      <div v-else>
        <processPlanDetail :taskTotalId="workTime.taskTotalId" :drawCode="dialog.drawCode" :detail="dialog2.formData" :type="dialog2.type" @editSuccess="editSuccess" :editDisalbe="status==='1'"></processPlanDetail>
      </div>
    </el-dialog>
    <div style="display:none">
      <!--  -->
      <process-flow-card  ref="processFlowCardRef" :pdfType="pdfType"></process-flow-card>
    </div>
  </div>
</template>
<script>
import pdf from 'vue-pdf';
import planApi from 'plugins/axios/planApi.js';
import baseApi from 'plugins/axios/baseApi.js';
import materielApi from 'plugins/axios/materielApi.js';
import uploadtemp from 'views/components/uploadtemp.vue' /**大文件上传 */
import uploadList from 'views/components/uploadList.vue' /**1-图纸上传、2-工艺上传、3-图形文件上传 的列表组件 */
import tableList29 from 'views/components/tableList29Gp.vue' /**29所列表组件 */
import taskDetail29 from 'views/components/taskDetail29.vue' /**29所任务详情组件 */
import processPlanList29 from 'views/components/processPlanList29.vue' /**29所工序列表组件 */
import processPlanDetail29 from 'views/components/processPlanDetail29.vue' /**29所工序详情组件 */
import processPlanList from 'views/components/processPlanList.vue' /**工艺编制列表组件 */
import processPlanDetail from 'views/components/processPlanDetail.vue' /**新增编辑工艺编制组件 */
import processFlowCard from 'views/components/processFlowCard.vue' /**工艺流程卡 */ 
import echarts from 'echarts';
export default {
  components: {
    pdf,
    uploadtemp,
    uploadList,
    tableList29,
    taskDetail29,
    processPlanList29,
    processPlanDetail29,
    processPlanList,
    processPlanDetail,
    'process-flow-card':processFlowCard
  },
  data(){
    return {
      detailTableList:[],
      customData:[],
      workTimeList:[],
      inputCount:0,
      pickerOptions: {
          disabledDate(time) {
            let curDate = (new Date()).getTime();
            let three = 32 * 24 * 3600 * 1000;
            let secondMonths = curDate - three;
            return time.getTime() > Date.now() || time.getTime() < secondMonths;;
          }
      }, 
      /**员工工时统筹 
       * 
       * {"itemType":2,"startTime":"2020-06-22T09:28:00","endTime":"2020-06-22T09:31:09","taskTotalId":86016}
       * 
       */
      workTime:{
        itemType:null,
        startTime:null,
        endTime:null,
        taskTotalId:null,
      },
      grid:{
         FirstDay:null,
         LastDay:null,
         XstartTime:null,
         XendTime:null,
         YAxisData:[],
         XAxisData:[
         ],
         seriesData:[],
      },
      userId:sessionStorage.getItem('userId'),
      //=======================================================line
      status:'0',
      isDidThis:0,
      postData:{
        isUploadDraw:1,
        planStatus:1,
      },
      machineAllList:[],/**所有机器列表 */
      search:{
        drawCode:"",
        makeNo:"",
        code:"",
        taskSerialNo:"",
        taskNo:'',
        customer:'',
        code29:'',
      },
      dialog:{/**弹框配置 */
        title:'',
        isShow:false,
        type:'',
        formData:{},
        activeName:'2',
        otherUpDataData:{},
        drawCode:''
      },
      dialog1:{
        title:'',
        isShow:false,
        formData:{},
        rules:{}
      },
      dialog2:{
        type:'',
        title:'',
        isShow:false,
        formData:{}
      },
      dialog3:{
        title:'',
        isShow:false,
        formData:{},
        rules:{
        }
      },
      pdfType:''/**打印pdf类型 */
    }
  },
  mounted(){
    this.status = this.$route.query.status;
    this.getTablList();
  },
  created(){
    this.$nextTick(()=>{
      this.getNowMonthDate();
    })
  },
  watch: {
    $route(){
      this.status = this.$route.query.status;
      this.search.drawCode="";
      this.search.makeNo="";
      this.search.code="";
      this.search.taskSerialNo="";
      this.getTablList();
    }
  },
  computed:{
    autoWidth(){
      return (this.$store.state.clientWidth-200);
    },
    autoHeight(){
      return (this.$store.state.clientHeight-200)+'px';
    },
  },
  methods:{
    resSearchBtn(){
      let self = this;
      self.search={
          drawCode:"",
          makeNo:"",
          code:"",
          taskSerialNo:"",
          taskNo:'',
          customer:'',
          code29:'',
        };
      self.getTablList();
    },
    searchGantt(val){
      let self = this;
      self.selectDzjzGantt();
      // console.log(self.workTimeList);
    },
    queryDayVal(){
      let self = this;
      self.selectUsersDzjzByDate();
    },
    queryDayValList(){
      let self = this;
      self.selectDzjzGantt();
    },
    /**查询员工工作内容缔造价值 */
    selectUsersDzjzByDate(){
      let self = this;
      let date =  new Date();
      let param={
        date:this.timestampToTime(date,'yyyy-mm-dd'),
        postId:2,
      };
      planApi.selectUsersDzjzByDate(param).then(res=>{
        self.detailTableList =   res.content.itemList;
        self.inputCount = res.content.planImportCount;
        // res.content.planImportList;
        // console.log(res.content);
      });
    },
    /**查询某个用户某个时间段的缔造价值统计甘特图 */
    selectDzjzGantt(){
      let self = this;
      debugger;
      let startDate =  self.workTimeList?self.workTimeList[0]:self.grid.FirstDay;
      let endDate =  self.workTimeList?self.workTimeList[1]:self.grid.LastDay;
      //获取开始时间与结束时间之间相差的天数
      // self.getLoopCount(startDate,endDate);
      // let tempDate =  new Date(endDate);
      //     endDate = tempDate.getFullYear()+'-'+(tempDate.getMonth()+1)+'-'+tempDate.getDay();
      /**
       *                             name:'',
                            type: 'custom',
       */
      planApi.selectDzjzGantt(self.userId,self.timestampToTime(startDate,'yyyy-mm-dd'),self.timestampToTime(endDate,'yyyy-mm-dd')).then(res=>{
        self.grid.series=[];
        self.customData = res.content;       
        self.drawCustom();
      });
    },
    //根据所传参数时间进行当月第一天和最后一天的日期获取
    getNowMonthDate(date) {
      let self = this;
      let tempDate = null;
      if(date==null|| date==undefined || date===''){
          tempDate = new Date();
      }
      let  year = tempDate.getFullYear() + "";
      let month = (tempDate.getMonth() + 1) + "";
        // 本月第一天日期
        let  begin = year + "-" + month + "-01 00:00:00";
        self.grid.FirstDay = begin;
        self.workTimeList.push(new Date(begin));
        // 本月最后一天日期    
        let lastDateOfCurrentMonth = new Date(year,month,0);
        let count = lastDateOfCurrentMonth.getDate();
        let end = year + "-" + month + "-" + count + " 23:59:59";
        self.grid.LastDay =  end;
        self.workTimeList.push(new Date(end));
        //获取当天的参数
        self.loopCount =  count;
    },
    getTablList(){/**计划列表 */
      let self = this;
      self.postData.drawCode=self.search.drawCode;
      self.postData.makeNo=self.search.makeNo;
      self.postData.code=self.search.code;
      self.postData.taskSerialNo=self.search.taskSerialNo;
      self.postData.isFinishProcess= self.status;
      self.postData.taskNo=self.search.taskNo;
      self.postData.customer=self.search.customer;
      self.postData.code29=self.search.code29;
      self.$refs.tableList29.get29TableList()
    },
    searchBtn(){
      this.getTablList();
    },
    /**获子组件回填的参数 */
    getChildEventParam(val){
      let self = this;
      self.isDidThis = val;
    },
    showDialog(type,row){
      let self = this;
      self.dialog.activeName='6';
      self.dialog.type = type;
      switch(type){
        case 'insert':
          self.dialog.isShow=true;
          self.dialog.formData={};
          self.dialog.title = '新增计划任务';
          break;
        case 'update':
          self.dialog.isShow=true;
          self.dialog.formData = row;
          self.dialog.title = '计划详情';
          this.workTime.taskTotalId = row.id; 
          self.dialog.drawCode = row.drawCode;
          self.dialog.otherUpDataData.drawNo=row.drawCode;
          break;
        case 'print':
           self.dialog.formData = row;
           self.$refs.print1.getCgPdfData(row.id);
          break;
      } 
    },
    showDialog1(type,row){
      this.dialog1.isShow=true;
      this.dialog1.type=type;
      switch(type){
        case 'insert':
          this.dialog1.formData={};
          this.dialog1.title = '新增29所工艺详情';
          break;
        case 'update':
          this.dialog1.formData = row;
          this.dialog1.title = '编辑29所工艺详情';
        break;
      }
    },
    showDialog2(type,row){
      let self = this;
      self.dialog2.type = type;
      if(row){
        row.person=Number(row.person);
        row.checkPerson=Number(row.checkPerson);
        row.cjCheckPerson=Number(row.cjCheckPerson);
      }  
      switch(type){
        case 'insert':
          self.dialog2.formData={
            draw:{
              type:1
            }
          }
          /**进行员工操作工时统筹数据加工 start */
           self.workTime.itemType = 6;
           self.workTime.startTime = new Date();
           self.insertDzjz();
           materielApi.technologyInfo({drawNo:self.dialog.drawCode}).then(res=>{
              self.dialog2.isShow=true;
              if(res.content){
                self.dialog2.formData.draw =res.content;  
                // self.dialog2.fromData.processProductionList =  self.dialog.fromData.processProductionList;
              }           
          }) 
          self.dialog2.title ="新增工艺编制"
          break;
        case 'update':
          self.dialog2.formData=row;
          self.dialog2.title ="编辑工艺编制";
          self.dialog2.formData.draw=self.dialog2.formData.draw?self.dialog2.formData.draw:{};
           materielApi.technologyInfo({drawNo:self.dialog.drawCode}).then(res=>{
              self.dialog2.isShow=true;
              if(res.content){
                self.dialog2.formData.draw=res.content;
                // self.dialog2.fromData.processProductionList =  self.dialog.fromData.processProductionList;
              }
            })
          break;
        case 'upload':
          self.dialog2.isShow=true;
          self.dialog2.formData=row;
          self.dialog2.title ="工艺上传列表";
          break;
        case 'delete':
          self.$confirm('是否删除该工序?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            materielApi.deleteProcessPlan(row.id).then(res=>{
              self.$message.success('删除成功!');
              self.$refs.processPlanListRef.getProcessPlanList();
            })
          }).catch(() => {});
          break;
      }
    },
    /**详情切换tab*/ 
    dialogHandleClick(){
      let self = this;
      switch(self.dialog.activeName){
        case '2':
          self.$refs.processPlanList29Ref.getProcessPlanList();
          break;
        case '3':
          self.$refs.drawing.getTableList();
          break;
        case '4':
          self.$refs.technology.getTableList();
          break;
        case '5':
          self.$refs.graphicsFile.getTableList();
          break;
        case '6':
          self.$refs.processPlanListRef.getProcessPlanList();
          break;
      }
    },
    /**获取29所任务详情列表*/ 
    getPlanTaskDetailList(){
        let self = this;
        planApi.planTaskDetailList1(self.dialog.formData.id).then(res=>{
        self.dialog.tableData=res.content;
      })
    },
    /***确认工艺编制完成 */
    confirmHandle(type,row){
      let self  = this;
      switch(type){
        case 'finished':
          self.$confirm('是否确认工艺编制完成?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          /**进行员工操作工时统筹数据加工 start */
           self.workTime.taskTotalId = row.id; 
           self.workTime.itemType = 8;
           self.workTime.startTime = new Date();
           self.insertDzjz();
          materielApi.finishProcess(row.id).then(res=>{
            self.dialog.isShow ? self.dialog.isShow =false:'';
            self.$message.success("确认成功")
            self.getTablList();
          })
        }).catch(()=>{})
          break;
        case 'return':
          self.$confirm('是否确认重新编制完成?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          materielApi.returnProcess(row.id).then(res=>{
            self.dialog.isShow ? self.dialog.isShow =false:'';
            self.$message.success("确认成功");
            self.getTablList();
          })
        }).catch(()=>{})
          break;
          
      }
       
    },
    editSuccess(){
      this.dialog2.isShow=false;
      this.$refs.processPlanListRef.getProcessPlanList();
      this.$message.success(`${this.dialog2.title}成功`)
    },
    dialogOpened(){
      this.dialog.type==='update'? this.$refs.processPlanListRef.getProcessPlanList():'';
    },
    dialog2Opened(){
      let self = this;
      if(self.dialog2.type==='upload'){
        self.$refs.processUploadRef.getTableList()
      }
    },
    handleAvatarSuccess(result){
      this.$refs.processUploadRef.getTableList()
    },
    printPdf(type,row){
      let self = this;
      self.pdfType = type;
      self.$refs.processFlowCardRef.getCgPdfData(row.id);
    },
    /**员工工时统筹 */
    insertDzjz(){
      let self = this;
      let param={
        itemType:self.workTime.itemType,
        startTime:self.workTime.startTime,
        endTime:self.workTime.endTime,
        taskTotalId:self.workTime.taskTotalId,
      };
      planApi.insertDzjz(param).then(res=>{
        console.log(res.content);
      });
    },
    drawCustom() {
                let _this = this;
                this.chartCustom = echarts.init(document.getElementById('gantt'));
                function renderItem(params, api) {
                    let categoryIndex = api.value(0);
                    let start = api.coord([api.value(1), categoryIndex]);
                    let end = api.coord([api.value(2), categoryIndex]);
                    let height = api.size([0, 1])[1] * 0.6;

                    let rectShape = echarts.graphic.clipRectByRect({
                        x: start[0],
                        y: start[1] - height / 2,
                        width: end[0] - start[0],
                        height: height
                    }, {
                        x: params.coordSys.x,
                        y: params.coordSys.y,
                        width: params.coordSys.width,
                        height: params.coordSys.height
                    });

                    return rectShape && {
                        type: 'rect',
                        shape: rectShape,
                        style: api.style()
                    };
                }
                let legendData=[],yAxisData =[],seriesData=[];


                console.log( _this.customData )
                for (let i = 0; i < _this.customData.length; i++) {

                    let item = _this.customData[i];
                    yAxisData.push(item.currentDate);
                    // legendData.push({
                    //     name: item.isRepeat == 1 ? "时间重叠" :(item.state == 0 ? "每日任务" : (item.state == 1 ? "发放任务" :"")),
                    //     icon: 'circle'
                    // });

                    seriesData.push({
                        // name: item.isRepeat == 1 ? "时间重叠" :(item.state == 0 ? "每日任务" : (item.state == 1 ? "发放任务" :"")),
                        type: "custom",
                        itemStyle: {
                                normal: {
                                color:"rgb(58, 193, 196)",
                                opacity: 0.8,
                                    }
                              }, 
                        encode: {x: [1, 2], y: 0},
                        renderItem: renderItem,
                        data: [
                            {
                                // name: item.state == 0 ? "每日任务" : (item.state == 1 ? "发放任务" : ''),
                                value: [
                                    item.currentDate,
                                    '2019-01-01 ' + item.startTimeDesc.substr(11),
                                    '2019-01-01 ' + item.endTimeDesc.substr(11),
                                    item.startTime,
                                    item.endTime,
                                    item.drawCode,
                                    item.consumptionTime,
                                    item.itemTypeDesc,
                                ]
                            }
                        ]
                    })
                }
                this.chartCustom.clear();
                this.chartCustom.setOption({
                    color: [
                        '#0796ea',
                        '#F6F6F6',
                        '#0796ea',
                    ],
                    title: {
                        text: '工作统计',
                        textStyle: {
                            color: '#000',
                            fontSize: 17,
                            fontFamily: '微软雅黑'
                        }
                    },
                    tooltip: {
                        backgroundColor: "#F6F6F6",
                        borderWidth: 1,
                        borderColor: "rgba(0,0,0,.3)",
                        triggerOn: "click",
                        confine: true,
                        enterable: true,
                        transitionDuration: 0,
                        textStyle: {color: "#333"},
                        extraCssText: 'box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.3);',
                        formatter: function (params) {
                            console.log(  params.value  )
                            return '<div style="width: 300px;">' + params.value[0] +
                                '<P>图纸:' + params.value[5]+'</P>' +
                                '<P>任务类型：' + params.value[7]+'</P>' +
                                '<P>开始时间：' + params.value[1].substr(11)+'</P>' +
                                '<P>结束时间：' + params.value[2].substr(11)+'</P>' +
                                '<P>耗时：' + params.value[6]+'</P>' +
                                // '<P>是否实时时间：'+ (params.value[6] == 0 ? '否' : (params.value[6] == 1 ? '是' : '')) +'</P>' +
                                // '<P style="width: 280px;white-space:normal; word-break:break-all;">任务名称：'+params.value[5] +'</P>' +
                                '</div>';
                        }
                    },
                    dataZoom: [
                        {
                            type: 'slider',
                            filterMode: 'weakFilter',
                            showDataShadow: true,
                            bottom: 10,
                            height: 5,
                            borderColor: 'transparent',
                            backgroundColor: '#e2e2e2',
                            handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z',
                            handleSize: 20,
                            handleStyle: {
                                shadowBlur: 6,
                                shadowOffsetX: 1,
                                shadowOffsetY: 2,
                                shadowColor: '#aaa'
                            },
                            labelFormatter: ''
                        },
                        {
                            type: 'inside',
                            filterMode: 'weakFilter'
                        }
                    ],
                    // legend: {
                    //     left:100,
                    //     itemWidth: 14,
                    //     data:legendData
                    // },
                    grid: {left: 100, right: 40, bottom: 50,top:30},
                    xAxis: {
                        type: 'time',
                        splitLine: {show: false},
                        axisLabel: {
                            formatter: function (params) {
                                return _this.timestampToTime(params).substr(10)
                            }
                        }
                    },
                    yAxis: {
                        data: _this.unique(yAxisData)
                    },
                    series: seriesData
                });///
    },
    unique(Array) {
                let res = [];
                let json = {};
                for (let i = 0; i < Array.length; i++) {
                    if (!json[Array[i]]) {
                        res.push(Array[i]);
                        json[Array[i]] = 1;
                    }
                }
                return res;
    },
  }
}
</script>
<style lang="stylus" scoped>
  .addRole
    padding-bottom 10px
</style>